<template>
  <div id="switch-year">
    <el-link type="primary" :underline="false" @click="switchYear(-1)">上一年</el-link>
    <div id="years">
      <div v-for="(y,index) in list.slice(sliceFromIndex,list.length)" :key="y" :id="y" class="year-line">
        <div class="line" v-if="index > 0 && line"></div>
        <div class="year" :class="{anyClick:selectedYear===y}"
             @click="$store.dispatch('setSelectedYear',y)">
          {{ y }}
        </div>
      </div>
    </div>
    <el-link type="primary" :underline="false" @click="switchYear(1)">下一年</el-link>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  props: ['list', 'line'],
  name: "switch-year",
  data() {
    return {}
  },
  computed: {
    ...mapState(['selectedYear']),
    sliceFromIndex() {
      return Math.max(this.list.length - 5, 0)
    }
  },
  mounted() {

  },
  methods: {
    switchYear(step) {
      if (step === 1) {
        let el = this.list.shift()
        this.list.push(el)
      }
      if (step === -1) {
        let el = this.list.pop()
        this.list.unshift(el)
      }
      let index = this.list.indexOf(this.selectedYear) + step
      index = index < 0 ? this.list.length - 1 : index
      this.$store.dispatch('setSelectedYear', this.list[index % this.list.length])
    }
  }
}
</script>

<style scoped>
#switch-year {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: -5%;
  left: 60px;
  height: 100%;
}

#years {
  display: flex;
  justify-content: center;
  flex-direction: column;
  border: #409EFF 1px solid;
  border-radius: 8px;
  margin: 20px 0;
  box-shadow: 4px 4px 8px lightgray;
}

#years::-webkit-scrollbar {
  display: none;
}

#years .year-line {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

#years .year {
  border-radius: 5px;
  margin: 5px;
  padding: 3px 5px;
}

#years .line {
  width: 30px;
  height: 2px;
  background-color: #409EFF;
  margin: auto 0;
}
</style>